<!DOCTYPE html>
<html lang="zh">
  <head>
    <style>
      html,body,#app { height: 100%; margin: 0px; padding: 0px; }
      * ::-webkit-scrollbar { width: 0px; } /* 滚动条 */
      @keyframes rotate-360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      @keyframes rotate-n360 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
    </style>
    <script>
      /**
       * 加载 Loading
       * 请求失败，默认使用 htmlConfig 数据
       **/
      let htmlConfig = {
        bg: '#2B2C30',
        opacity: 100,
        src: '',
        text: 'Loadding...',
        textColor: '#fff',
        textMt: '10'
      }
      if(htmlConfig.src){
        document.write('<div id="loadingApp" style="position:absolute;left:0;width:100%;height:100%;top:0;background:'+ htmlConfig.bg +';opacity:'+ htmlConfig.opacity / 100 +';z-index:10000;">'+
        '<div style="height: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;">'+
          '<img src="'+ htmlConfig.src +'"/>'+
          '<div style="color: '+ htmlConfig.textColor +';margin-top:'+ htmlConfig.textMt +'px">'+ htmlConfig.text +'</div>'+
        '</div></div>');
      } else {
        document.write('<div id="loadingApp" style="position:absolute;left:0;width:100%;height:100%;top:0;background:'+ htmlConfig.bg +';opacity:'+ htmlConfig.opacity / 100 +';z-index:10000;">'+
        '<div style="height: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;">'+
          '<svg width="50px" height="50px">'+
              '<circle style="transform-origin: center;animation: rotate-360 1.2s linear infinite;" cx="25" cy="25" r="20" fill="transparent" stroke-width="3" stroke-dasharray="31.415, 31.415" stroke="#02bcfe" stroke-linecap="round" />'+
              '<circle style="transform-origin: center;animation: rotate-n360 1.2s linear infinite;" cx="25" cy="25" r="10" fill="transparent" stroke-width="3" stroke-dasharray="15.7, 15.7" stroke="#3be6cb" stroke-linecap="round" />'+
          '</svg>'+
          '<div style="color: '+ htmlConfig.textColor +';margin-top:'+ htmlConfig.textMt +'px">'+ htmlConfig.text +'</div>'+
        '</div></div>');
      }
      document.onreadystatechange = function () {
        if (document.readyState == "complete") {
          let loadingMask = document.getElementById("loadingApp");
          loadingMask.parentNode.removeChild(loadingMask);
        }
      }
    </script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <!-- <link rel="stylesheet" href="../public/fonts.googleapis.css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="../public/materialdesignicons.min.css"> -->
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>
